<template>
  <div class="r404-container">
    <div class="r404-text">
      <div class="r404-404">404</div>
      <div class="r404-find-text">没有找到相应页面</div>
    </div>
    <div class="img-404">
      <img class="img-404-main" :src="img404" alt="r404"/>
      <img class="img-404-cloud" :src="img404Cloud" alt="r404-cloud"/>
    </div>
  </div>
</template>

<script>
import a from '@/assets/style/ch-varibles.scss';
export default {
  name: 'R404',
  data() {
    return {
      img404: require('@/assets/img/r404/404.png'),
      img404Cloud: require('@/assets/img/r404/404_cloud.png'),
    }
  },
  mounted() {
    console.log(a)
  }
}
</script>

<style lang="scss" scoped>
.r404-container {
  width: 100%;
  height: 95%;
  .r404-text {
    width: 100%;
    text-align: left;
    .r404-404 {
      color: #409EFF;
      font-size: 40px;
      font-weight: 800;
      padding-left: 5%;
    }
    .r404-find-text {
      color: #409EFF;
      font-weight: 600;
      font-size: 32px;
      padding-left: 5%;
    }
  }
  .img-404{
    padding-left: 5%;
    position: relative;
    .img-404-cloud{
      position: absolute;
      width: 80px;
      top: 17px;
      left: 220px;
      animation-name: cloud;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
}
@keyframes cloud {
  0% {
    top: 17px;
    left: 220px;
    opacity: 1;
  }
  20% {
    top: 33px;
    left: 188px;
    opacity: 1;
  }
  80% {
    top: 81px;
    left: 92px;
    opacity: 1;
  }
  100% {
    top: 97px;
    left: 60px;
    opacity: 1;
  }
}
@keyframes cloud2 {
  0% {
    top: 17px;
    left: 220px;
    opacity: 1;
  }
  20% {
    top: 33px;
    left: 188px;
    opacity: 1;
  }
  80% {
    top: 81px;
    left: 92px;
    opacity: 1;
  }
  100% {
    top: 97px;
    left: 60px;
    opacity: 1;
  }
}
</style>
